<template>
  <div>
    <el-table :data="allUsers" style="width: 100%" empty-text="暂无数据">
      <el-table-column label="名字" prop="name"></el-table-column>
      <el-table-column label="账号" prop="account"></el-table-column>
      <el-table-column label="密码" prop="passwd"></el-table-column>
      <el-table-column label="性别" prop="gender">
        <template slot-scope="scope">
          {{ scope.row.gender || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age">
        <template slot-scope="scope">
          {{ scope.row.age || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phone">
        <template slot-scope="scope">
          {{ scope.row.phone || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" prop="email">
        <template slot-scope="scope">
          {{ scope.row.email || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" prop="schoolName">
        <template slot-scope="scope">
          {{ scope.row.schoolName || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="角色" >
      <template slot-scope="scope">
        {{getRoleName(scope.row.role)}}
      </template>
      </el-table-column>
      <el-table-column label="省份" prop="province">
        <template slot-scope="scope">
          {{ scope.row.province || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="城市" prop="city">
        <template slot-scope="scope">
          {{ scope.row.city || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="成绩" prop="grade">
        <template slot-scope="scope">
          {{ scope.row.grade || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime">
        <template slot-scope="scope">
          {{ scope.row.createTime || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="头像" >
        <template slot-scope="scope">
          <img v-if="scope.row.url" :src="scope.row.url" class="avatar" style="max-height: 50px;max-width: 50px">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getAllUser} from '../../../../api/user'

export default {
  name: 'administrators',
  inject: ['reload'],
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    })
  },
  data () {
    return {
      allUsers: [] // 保存获取到的用户的数组
    }
  },
  mounted () {
    this.getAllUser()
  },
  methods: {
    getRoleName (role) {
      if (role === 1) {
        return '学生'
      } else if (role === 2) {
        return '老师'
      } else if (role === 3) {
        return '学院'
      } else if (role === 4) {
        return '学校'
      } else if (role === 5) {
        return '管理员'
      } else {
        return '未知'
      }
    },
    getAllUser () {
      getAllUser().then(result => {
        this.allUsers = result
      })// 使用获取的数据更新用户数组
      console.log(this.allUsers)
    }
  }
}
</script>

<style scoped>
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}

</style>
